<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>velocity.js动画框架</title>
	<script src="js/vue.js"></script>
	<script src="js/velocity.js"></script>
</head>
<body>
<div id="app">
	<transition
			@before-enter="beforehandleenter"
			@enter="handleEnter"
			@after-enter="afterEnter"
			name="fade"
			enter-active-class="active"
			leave-active-class="leave"
	>
		<div v-show="seen">hello world</div>
	</transition>
	<button @click="handleclick">change</button>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			seen:true
		},
		methods:{
			handleclick:function(){
				this.seen = !this.seen
			},
			beforehandleenter:function(el){
            el.style.opacity = 0
			},
			handleEnter:function(el,done){
            Velocity(el,{opacity:1},
	            {duration:1000,
		         complete:done()
	            })
			},
			afterEnter:function(el){

			}
		}
	})
</script>
</body>
<!--
Velocity.js
优秀的js动画框架
====================
opacity:透明度
duration:耗时
done():动画停止,结束
complete:配置项,在一个函数内最后自动执行
-->
</html>